<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <style></style>
    <script>
        // console.log()
        // for(var i = 1; i <= 6; i++){
        //     // document.write('<h'+i+'>h'+i+'</h'+i+'>');
        //     if(i % 2 === 1){
        //         document.write(`<h${i}>h${i}</h${i}>`);
        //     }
        // }
        // for(var i = 1; i <= 6; i++){
        //     if(i % 2 === 0){
        //         continue;
        //     }
        //     document.write(`<h${i}>h${i}</h${i}>`);
        // }
    </script>
    <script>
        // 函数及参数
        function printTable(row,col){
            document.write('<table border="1">');
            for(var i = 0; i < row; i++) {
                document.write('<tr>');
                for(var j = 0; j < col; j++) {
                    document.write(`<td>Row ${i+1}, Col ${j+1}</td>`);
                }
                document.write('</tr>');
            }
            document.write('</table>');
        }
        // printTable(2,3);
        // printTable(5,6);
        // 函数返回值
        function add(a,b){
            // document.write(a + b);
            // 使用return返回值
            return a + b;
        }
        var result = add(1,2);
        // console.log( add(1,2) ); 
        // var input = prompt('请输入一个数字');
        // var input2 = prompt('请输入一个数字');
        // // var result = add(parseInt(input),parseInt(input2));
        // var result = add(+input,+input2);
        // document.write(result);
        function fn(){
            console.log(123)
        }
        // var a = fn();
    </script>
    <script>
        window.onload = function(){
            var ul = document.getElementById('list');
            console.log(ul)
        }
    </script>
    <style>
        input{
            outline: none;
        }
    </style>
</head>
<body>
    <!-- <button id="btn">调用函数</button> -->
    <ul id="list"></ul>
    <input type="text" id="input">
    <button id="addBtn">添加</button>
    <script>
        // 发布评论
        // 1.获取元素
        var addBtn = document.getElementById('addBtn');
        var list = document.getElementById('list');
        var input = document.getElementById('input');

        // 2.绑定事件
        input.onfocus = function(){
            input.style.border = '1px solid red';
        }
        // 触发事件
        input.focus();
        input.onblur = function(){
            input.style.border = '1px solid #ccc';
        }
        addBtn.onclick = function(){
            list.innerHTML += '<li>'+input.value+'</li>';
            input.value = '';
            input.focus();
        }
        addBtn.click();
    </script>
    <script>
        // 函数：function 函数名(参数){函数体;return 返回值}
        // 调用：
        // 直接调用：函数名(参数);
        // 间接调用：事件
        // var btn = document.getElementById('btn');
        // btn.onclick = function(){
        //     console.log(123);
        //     // btn.style.display = 'none';
        //     btn.innerHTML = '123';
        //     // btn.style.width = '200px';
        //     // btn.style.height = '100px';
        //     // btn.style.background = 'red';
        // }
    </script>
</body>
</html>